<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hi</title>
    <style>
        *{
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .container{
            width:226px;
            height: 330px;
            background: #343434;
            margin:0 auto ;
        }
        .circles{
            padding: 36px;/*动画*/
            height: 226px;

            animation-name:wobble;
            animation-duration: 4.4s;   /*9s*/
            animation-timing-function: linear;
            animation-delay: 0s;
            animation-iteration-count: infinite;

        }
        .circles > .outer{
            height: 100%;
            border:5px solid #9b9b9b;
            padding: 10px;/*动画*/

            border-radius:50%;
            border-radius:50%;


            animation-name:outer_wobble;
            animation-duration: 4.4s;  /*9s*/
            animation-timing-function: linear;
            animation-delay: 0s;
            animation-iteration-count: infinite;
        }
        .circles > .outer > .inner{
            height: 100%;
            border:15px solid #ffffff;

            border-radius:50%;
            border-radius:50%;
        }

        @keyframes outer_wobble {
            20% {
                padding: 20px;
            }
            40% {
                padding:10px;
            }
            65%{
                padding:22px;
            }
            100%{
                padding: 10px;
            }
        }

        @keyframes wobble {
            20% {
               padding: 26px;
            }
            40% {
                padding:36px;
            }
            100%{
                padding:36px;
            }
        }

        .text{
            font-size: 22px;
            color: #ffffff;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="circles">
            <!--外部圆-->
            <div class="outer">
                <!--内部-->
                <div class="inner">

                </div>
            </div>
        </div>
        <div class="text">
            HI!
        </div>

    </div>
</body>
</html>